<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>线</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            svg {
                background-color: cyan;
            }
            .test {
                stroke: red;
                stroke-width: 5px;
                transition: all 0.5s;
                /* 设置轴心、旋转、动画效果都可以 */
            }
            .test:hover {
                stroke: gold !important;
            }
        </style>
    </head>
    <body>
        <svg width="200" height="200">
            <!-- 直线：两点确定一条线 -->
            <!-- <line x1="0" y1="10" x2="180" y2="150" style="stroke: red; stroke-width: 2px"></line> -->
            <line x1="0" y1="10" x2="180" y2="150" class="test"></line>

            <!-- 折线：多条线，可以组成多边形，一对数值表示一个点 -->
            <!-- 可以画出：直线、矩形等图形 -->
            <!-- 逗号分隔 -->
            <polyline points="0,0,10,90,50,90,100,100,0,0" fill="none" stroke="black"></polyline>
            <!-- 空格分隔（推荐） -->
            <polyline points="100,50 150,100 180,20" fill="none" stroke="orange"></polyline>
        </svg>

        <svg width="200" height="200">
            <!-- 多边形：与折线类似 -->
            <!-- 一个点表示一个角，三点就能画三角形 -->
            <polygon points="20,30 0,100, 150,180" style="stroke: gold; fill: purple"></polygon>
        </svg>
        <svg width="200" height="200">
            <!-- 多边形：四边形 -->
            <polygon points="20,30 0,100, 150,180 180,120" style="stroke: gold; fill: purple"></polygon>
        </svg>
    </body>
</html>
